<template>
	<view class="wallet">
		<view class="wallet_head">
			<view class="wallet_total">
				<view class="total_sign"></view>
				<view class="total_num">{{money_userInfo.score?money_userInfo.score:'0.00'}}</view>
			</view>
			<view class="total_title">金币总额</view>
		</view>
		<view class="wallet_detail">
			<view class="wallet_nav flex ali-c jus-a">
				<!-- <view class="navigation" :class="{active:select==1}" @tap="tabto(1)">账户明细</view> -->
				<view class="navigation flex1 flexc" :class="{active:select==1}" @tap="tabto(1)">金币收入</view>
				<view class="navigation flex1 flexc" :class="{active:select==-1}" @tap="tabto(-1)">金币支出</view>
			</view>
			<view class="wallet_list" v-for="(item,index) in userDetailMoneys" :key="index">
				<view class="wallet_info">
					<view class="info_title twoline flex1">{{item.intro}}</view>
					<view class="info_num ">
						<view class="num_money">{{item.money}}</view>
						<view class="num_time">{{item.recorded_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="none_more">没有更多了</view>
		
		<!-- <navigator url="/pages/mine/withdrawal/withdrawal" hover-class="none" class="cash_out"> -->
		<view class="cash_out" >
			<view class="cash_btn"  @click="openfun()" >充值</view>
		</view>	
		<!-- </navigator> -->
		
		<uni-popup ref="goods_popup" type="center" :mask-click="true" :animation="true" >
			<view style="width: 650rpx; background-color: aliceblue; border-radius: 15rpx; padding: 25rpx;">
				
				<view class="" style="width: 100%;">
					<text decode="true"  style="font-size: 32upx;font-weight: bold;" >充值金额</text>
					<view class="input-box1 ali-c" style="margin-top: 10rpx; border: 1rpx solid #b5b5b5;border-radius: 15rpx; ">
						<text decode="true" class="icon">￥</text>
						<input class="input" v-model="money"   @focus="inputfun()"  maxlength="8"  placeholder-class="placeholder" type="digit" placeholder="0.00" />
					</view>
				</view>
				
				<view class="" style="font-size: 30rpx; font-weight: bold;margin-top: 20rpx;">
					充值金币
				</view>
				<view class="" style="display: flex;flex-wrap:wrap; justify-content: space-around;">
					
					<view :class="xuanzhong == index?'xuanzong1':'xuanzong'"  @click="xuanzefun(index)"  v-for="(item,index) in chongzhi" :key="index" style="width: 30%;  margin-top: 15rpx;padding: 20rpx;border-radius: 15rpx;">
						<view class="" style="display: flex; align-items: center; justify-content: center;">
							<img :src="photo_cdn1 + item.img" alt="" style="width: 28rpx; height: 28rpx;" />
							<view style="font-weight: bold; font-size: 36rpx; " >x{{item.title}}</view> 
						</view>
						<view class="" style="display: flex; align-items: center;justify-content: center; color: #3388FF; font-weight: bold;font-size: 28rpx;margin-top: 10rpx;">
							<view class="">
								￥
							</view>
							<view class="">
								{{item.rmb}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="" style="display: flex; justify-content: space-between; margin-top: 25rpx; align-items: center;">
					<view class="">
						需花费:{{money}} ¥
					</view>
					<view class="">
						<button size="mini" type="primary" @click="payjifen()" >立即充值</button>
					</view>
				</view>
				
			</view>	
		</uni-popup>	
		
		<paytype ref="paytype" @payreturn="payreturn" :price="need_pay"></paytype>
		<!-- 选择支付方式 -->
	</view>
</template>

<script>
	
	import {createJifenOrder , getjifenList} from "@/utils/api/user.js" 
	import {apppay} from "@/utils/apppay.js";
	import paytype from "@/components/paytype/paytype.vue";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	import {deatailjifenLog} from "@/utils/api/user.js";
	export default{
		components:{
			paytype,
		},
		data(){
			return{
				photo_cdn1,
				select:1,
				page:0,
				money_userInfo:{},
				userDetailMoneys:[],
				isshowall:false,
				chongzhi:[],
				xuanzhong:'',
				money:0,
				need_pay:0
				
			}
		},
		onLoad() {
			this.ongetList();
			this.deatailMoneyLogfun();
		},
		onReachBottom() {
			if(!this.isshowall){
				this.deatailMoneyLogfun();
			}
		},
		methods:{
			ongetList(){
				getjifenList().then(res=>{
					this.chongzhi = res.data.list;
				})
			},
			//支付
			payjifen(){
				if(!this.money){
					this.$api.msg("请选择金额");
					return false;
				}
				
				this.need_pay = this.money;
				this.$showModal({
					title:'提示',
					concent:`您确定要购买金币吗？`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					this.$refs.paytype.show();
				}).catch(err=>{
					console.log(err)
				})	
			},
			//选择完支付方式之后
			// paytype 1 微信 2支付宝
			payreturn(paytype){
				// pay_way:"weixin",//支付方式 '支付方式:weixin=微信支付,alipay=支付宝支付'
				console.info("paytype",paytype);
				if(paytype==1){
					this.pay_way = 'weixin';
					this.createOrderfun();
				}else if(paytype==2){//支付宝支付
					this.pay_way = 'alipay';
					this.createOrderfun();
				}
			},
			//创建订单
			createOrderfun(){
				console.log("创建订单")
				createJifenOrder({
					// donation_id:this.users.id,
					money:this.money,
					pay_way:this.pay_way,
				}).then((res)=>{
					if(res.code==1){
						this.log_id = res.data.payLog.id;
						this.amount = res.data.orderInfo.need_pay;
						if(this.pay_way=='weixin'){
							this.weixinAlipayfun('weixin');
						}else{
							this.weixinAlipayfun('alipay');
						}
					}
				})
			},
			//微信支付宝支付
			weixinAlipayfun(paytype){
				//paytype 'weixin'微信 'alipay'支付宝
				apppay(
					this.log_id,
					this.amount,
					paytype,
				).then((res)=>{
					console.info(res);
					uni.showToast({
						title:"支付成功"
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
					
				}).catch((err)=>{
					console.log(err);
				})
			},
			//金额框选中
			inputfun(){
				console.log("选中")
				this.xuanzhong = null;
				this.money = 0 ;
			},
			//选择key
			xuanzefun(e){
				this.xuanzhong = e; 
				this.money = null;
				this.money = this.chongzhi[e].rmb;
			},
			//打开弹窗选择充值金额
			openfun(){
				this.$refs.goods_popup.open();
			},
			//关闭弹窗
			closepup(){
				this.$refs.goods_popup.close();
			},
			tabto(item){
				if(this.select==item){
					return false;
				}
				this.select = item;
				this.page = 0;
				this.isshowall = false;
				this.userDetailMoneys = [];
				this.deatailMoneyLogfun();
			},
			async deatailMoneyLogfun(){
				this.page++;
				let res = await deatailjifenLog({
					type:3,//type 资金类型，1=用户余额，2=代理资金，3=佣金
					heatos:this.select,//1=收入，-1=支出
					page:this.page,
				})
				if(res.code==1){
					this.money_userInfo = res.data.userInfo;
					this.userDetailMoneys = [...this.userDetailMoneys,...res.data.userDetailMoneys];
					if(res.data.userDetailMoneys.length==0){
						this.isshowall = true;
						if(this.page>1){
							this.$api.msg("没有更多了~");
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.xuanzong{
		border: 1rpx solid #b5b5b5;
	}
	.xuanzong1{
		border: 6rpx solid #3388FF;
	}
	.input {
		width: 100%;
		height: 90upx;
		font-size: 70upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: $themecolor;
		margin-left: 20upx;
	}
	@import "./jifen.scss";
</style>